<template>
  <section>
    <el-button size="mini" type="primary" @click="addBtn" >+</el-button>
    <el-row style="margin-top: 10px;display: flex;flex-direction: row;flex-wrap: wrap;align-content: center">
      <div v-for="(ad,index) in currAds" :key="index">
        <featured-box :ad="currAds[index]"></featured-box>
      </div>
    </el-row>
    <el-pagination v-show="totalPage>0" style="margin-top:20px;" small
                   layout="prev, pager, next"
                   :page-count="totalPage"
                   @current-change="goPage">
    </el-pagination>
    <el-dialog :visible.sync="newAdDialog" v-if="currAd" title="设置">
      <new-ad :ad="currAd" v-on:cancelDialog="getAds(0,lightBoxId)"></new-ad>
    </el-dialog>
  </section>
</template>

<script>
  import featuredBox from './featuredBox'
  import newAd from '../appAd/newAd'
  import setDetail from './setDetail'
  import uploadImg from  '@/common/uploadImg'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "featuredAd",
    components:{uploadImg,setDetail,newAd,featuredBox},
    props:['lightBoxId'],
    data(){
      return {
        newAdDialog:false,
        currAd:null,
        currItem:null,
        show:false,
        totalPage:0
      }
    },
    watch:{
      lightBoxId(nv,ov){
        if(nv) this.init(nv)
      }
    },
    created(){
      this.init(this.lightBoxId)
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      goPage(val){
        this.getAds(val-1,this.lightBoxId)
      },
      init(lightBoxId){
        this.getAds(0,lightBoxId)
      },
      getAds(pageNo,lightBoxId){
        this.fetch({name:"getAdList",data:{page:pageNo?pageNo:0,lightBoxId}})
          .then(res=>{
            this.currAds=res.content
            this.totalPage=res.totalPages
            if(this.currAds.length<=0){
              this.$message({type:'info',message:'当前位置无广告，请新建！'})
              return
            }
            this.currItem=this.currAds[0]
            this.currAds.forEach(item=>{
              if(item.img === undefined){
                Vue.set(item,'img','')
              }
            })
            this.newAdDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      addBtn(){
        this.currAd={description:'第'+ (this.currAds.length+1)+'个推荐',contentType:null,contentValue:null,departmentId:'空',img:null,data:{},lightBoxId:this.lightBoxId}
        this.newAdDialog=true
      },
      delItem(e){
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"deleteAd",data:{id:e.id}})
              .then(res=>{
                this.$message({type:'success',message:'删除成功！'})
                this.getAds(0,this.lightBoxId)
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      editAdBtn(item){
        this.currAd=item
        this.newAdDialog=true
      },
    }
  }
</script>

<style scoped>
  .box-card{
    width: 400px;
    margin-right: 20px;
    margin-top: 20px;
  }
</style>
